<template>
  <div class="app-container">
    <!-- 背景图层 -->
    <div class="background-layer"></div>
    
    <!-- 内容容器 -->
    <div class="content-container">
      <!-- 头部 -->
      <div class="app-header">
        <div class="logo-container">
          <i class="el-icon-link"></i>
          <h1>收藏管理</h1>
        </div>
        
        <!-- 搜索框和按钮容器 -->
        <div class="header-content">
          <!-- 搜索框 -->
          <div class="search-container">
            <el-input
              v-model="searchQuery"
              placeholder="搜索收藏或直接输入网址"
              prefix-icon="el-icon-search"
              clearable
              ref="searchInput"
              @keyup.enter.native="handleSearch"
              @input="handleInput"
              @clear="resetSearch"
            />
          </div>
          
          <!-- 功能按钮 -->
          <div class="action-buttons">
            <el-button 
              type="primary" 
              icon="el-icon-plus" 
              @click="showAddDialog"
            >添加收藏</el-button>
            <el-button 
              type="info" 
              icon="el-icon-folder-add" 
              @click="showCategoryDialog"
            >管理分类</el-button>
          </div>
        </div>
      </div>
      
      <!-- 主要内容区 -->
      <div class="main-content">
        <!-- 分类标签 -->
        <div class="category-tabs">
          <el-tabs 
            v-model="activeCategory" 
            @tab-click="handleTabClick" 
            type="card"
          >
            <el-tab-pane 
              label="全部书签" 
              name="0"
            ></el-tab-pane>
            <el-tab-pane 
              v-for="item in categories" 
              :key="item.id" 
              :label="item.name" 
              :name="item.id.toString()"
            ></el-tab-pane>
          </el-tabs>
        </div>
        
        <!-- 书签内容 -->
        <el-row v-if="loading">
          <div class="loading-container">
            <div class="loader"></div>
            <p>加载中...</p>
          </div>
        </el-row>
        <el-row v-else>
          <!-- 书签列表 -->
          <div v-if="filteredBookmarks.length > 0" class="bookmark-container">
            <div
              v-for="bookmark in filteredBookmarks"
              :key="bookmark.id"
              class="bookmark-card"
              @click="openSite(bookmark.url)"
            >
              <!-- 卡片头部 -->
              <div class="bookmark-header">
                <!-- 书签图标 -->
                <div class="bookmark-icon">
                  <template v-if="bookmark.icon">
                    <img :src="bookmark.icon" :alt="bookmark.title" />
                  </template>
                  <template v-else>
                    <div 
                      class="default-icon" 
                      :style="{
                        background: `linear-gradient(135deg, ${getRandomColor(bookmark.url)} 0%, ${getSecondaryColor(bookmark.url)} 100%)`
                      }"
                    >
                      {{ getInitial(bookmark.title) }}
                    </div>
                  </template>
                </div>
                <h3 class="bookmark-title">{{ bookmark.title }}</h3>
                
                <!-- 操作按钮 -->
                <div 
                  class="bookmark-actions"
                  @click.stop
                >
                  <el-dropdown 
                    trigger="click" 
                    @command="command => handleCommand(command, bookmark)"
                  >
                    <span class="el-dropdown-link">
                      <i class="el-icon-more"></i>
                    </span>
                    <el-dropdown-menu slot="dropdown">
                      <el-dropdown-item command="edit">
                        <i class="el-icon-edit"></i> 编辑
                      </el-dropdown-item>
                      <el-dropdown-item command="delete">
                        <i class="el-icon-delete"></i> 删除
                      </el-dropdown-item>
                    </el-dropdown-menu>
                  </el-dropdown>
                </div>
              </div>
              
              <!-- 链接地址 -->
              <div class="bookmark-url">{{ bookmark.url }}</div>
              
              <!-- 描述 -->
              <div class="bookmark-desc">{{ bookmark.description || '暂无描述' }}</div>
            </div>
          </div>
          
          <!-- 空状态 -->
          <div v-else class="empty-state">
            <i class="el-icon-folder-opened"></i>
            <div class="empty-text">
              {{ isSearching ? '没有找到相关书签' : '暂无书签，请添加' }}
            </div>
            <el-button 
              type="primary" 
              icon="el-icon-plus" 
              @click.stop="showAddDialog"
            >添加收藏</el-button>
          </div>
        </el-row>
      </div>
      
      <!-- 添加/编辑书签对话框 -->
      <el-dialog
        :title="dialogType === 'add' ? '添加书签' : '编辑书签'"
        :visible.sync="bookmarkDialog"
        width="500px"
        @close="onDialogClose"
        append-to-body
        destroy-on-close
        custom-class="custom-dialog"
      >
        <el-form
          ref="bookmarkForm"
          :model="bookmarkForm"
          :rules="bookmarkRules"
          label-width="80px"
        >
          <el-form-item label="名称" prop="title">
            <el-input v-model="bookmarkForm.title" placeholder="请输入网站名称" />
          </el-form-item>
          <el-form-item label="URL" prop="url">
            <div class="url-input-container">
              <el-input 
                v-model="bookmarkForm.url" 
                placeholder="请输入网站地址" 
                @input="debounceUrlInput"
              />
              <el-button 
                type="primary" 
                icon="el-icon-refresh" 
                circle
                size="mini"
                class="refresh-icon"
                title="获取网站图标"
                @click="fetchWebsiteIcon"
              ></el-button>
            </div>
          </el-form-item>
          <el-form-item label="图标URL" prop="icon">
            <div class="icon-input-container">
              <el-input 
                v-model="bookmarkForm.icon" 
                placeholder="请输入图标地址(可选)" 
              />
              <div class="icon-preview">
                <img v-if="bookmarkForm.icon" :src="bookmarkForm.icon" alt="图标预览" />
                <div 
                  v-else 
                  class="default-icon" 
                  :style="{
                    background: `linear-gradient(135deg, ${getRandomColor(bookmarkForm.url)} 0%, ${getSecondaryColor(bookmarkForm.url)} 100%)`
                  }"
                >
                  {{ getInitial(bookmarkForm.title) }}
                </div>
              </div>
            </div>
          </el-form-item>
          <el-form-item label="分类" prop="categoryId">
            <el-select v-model="bookmarkForm.categoryId" placeholder="请选择分类" style="width: 100%">
              <el-option
                v-for="item in categories"
                :key="item.id"
                :label="item.name"
                :value="item.id"
              />
            </el-select>
          </el-form-item>
          <el-form-item label="描述" prop="description">
            <el-input
              v-model="bookmarkForm.description"
              type="textarea"
              :rows="3"
              placeholder="请输入网站描述(可选)"
            />
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="bookmarkDialog = false">取 消</el-button>
          <el-button type="primary" @click="submitBookmarkForm">确 定</el-button>
        </div>
      </el-dialog>
      
      <!-- 分类管理对话框 -->
      <el-dialog
        title="分类管理"
        :visible.sync="categoryDialog"
        width="500px"
        @close="resetCategoryForm"
        append-to-body
        destroy-on-close
        custom-class="custom-dialog"
      >
        <el-form
          ref="categoryForm"
          :model="categoryForm"
          :rules="categoryRules"
          label-width="80px"
        >
          <el-form-item label="名称" prop="name">
            <el-input v-model="categoryForm.name" placeholder="请输入分类名称" />
          </el-form-item>
          <el-form-item label="排序" prop="sort">
            <el-input-number v-model="categoryForm.sort" :min="1" :max="99" />
          </el-form-item>
        </el-form>
        
        <div class="form-actions">
          <el-button type="primary" @click="submitCategoryForm">
            {{ categoryForm.id ? '修改' : '添加' }}
          </el-button>
          <el-button @click="resetCategoryForm">重置</el-button>
        </div>
        
        <el-divider content-position="center">分类列表</el-divider>
        
        <el-table :data="categories" style="width: 100%" border>
          <el-table-column prop="name" label="名称" />
          <el-table-column prop="sort" label="排序" width="80" />
          <el-table-column label="操作" width="120">
            <template slot-scope="scope">
              <el-button
                type="text"
                size="small"
                @click="handleEditCategory(scope.row)"
              >编辑</el-button>
              <el-button
                type="text"
                size="small"
                @click="handleDeleteCategory(scope.row)"
              >删除</el-button>
            </template>
          </el-table-column>
        </el-table>
        
        <div slot="footer" class="dialog-footer">
          <el-button @click="categoryDialog = false">关 闭</el-button>
        </div>
      </el-dialog>
    </div>
  </div>
</template>

<script>
import { listCategory, addCategory, updateCategory, delCategory } from "@/api/bookmark/category";
import { listBookmark, addBookmark, updateBookmark, delBookmark, searchBookmark } from "@/api/bookmark/bookmark";

export default {
  name: "Index",
  data() {
    return {
      // 加载状态
      loading: true,
      // 版本号
      version: "3.8.5",
      // 搜索查询
      searchQuery: "",
      isSearching: false,
      // 防抖计时器
      inputTimer: null,
      // 书签列表
      bookmarks: [],
      // 分类列表
      categories: [],
      // 当前选中的分类
      activeCategory: "0",
      // 书签对话框
      bookmarkDialog: false,
      dialogType: "add", // add 或 edit
      bookmarkForm: {
        id: null,
        title: "",
        url: "",
        icon: "",
        categoryId: null,
        description: ""
      },
      bookmarkRules: {
        title: [{ required: true, message: "请输入网站名称", trigger: "blur" }],
        url: [
          { required: true, message: "请输入网站地址", trigger: "blur" },
          { type: "url", message: "请输入有效的URL地址", trigger: "blur" }
        ],
        categoryId: [{ required: true, message: "请选择分类", trigger: "change" }]
      },
      // 分类对话框
      categoryDialog: false,
      categoryForm: {
        id: null,
        name: "",
        sort: 1
      },
      categoryRules: {
        name: [{ required: true, message: "请输入分类名称", trigger: "blur" }]
      },
      // 预设图标颜色
      iconColors: [
        "#3498db", "#2ecc71", "#e74c3c", "#f39c12", "#9b59b6",
        "#1abc9c", "#e67e22", "#34495e", "#16a085", "#d35400",
        "#8e44ad", "#2980b9", "#c0392b", "#27ae60", "#7f8c8d"
      ],
      // 辅助色
      secondaryColors: [
        "#2980b9", "#27ae60", "#c0392b", "#d35400", "#8e44ad",
        "#16a085", "#e67e22", "#2c3e50", "#148f77", "#a04000",
        "#6c3483", "#1f618d", "#922b21", "#196f3d", "#616a6b"
      ],
      // 处理URL变化
      iconTimer: null
    };
  },
  computed: {
    filteredBookmarks() {
      if (this.activeCategory === "0") {
        return this.bookmarks;
      } else {
        return this.bookmarks.filter(
          item => item.categoryId && item.categoryId.toString() === this.activeCategory
        );
      }
    }
  },
  created() {
    this.getCategories();
    this.getBookmarks();
  },
  mounted() {
    // 页面加载完成后，聚焦到搜索框
    this.focusSearchInput();
    
    // 添加全局回车键事件
    document.addEventListener('keydown', this.handleGlobalKeyDown);
  },
  beforeDestroy() {
    // 移除全局事件监听
    document.removeEventListener('keydown', this.handleGlobalKeyDown);
  },
  methods: {
    // 获取分类列表
    getCategories() {
      listCategory().then(response => {
        this.categories = response.rows || [];
      }).catch(() => {
        this.categories = [];
      });
    },
    
    // 获取书签列表
    getBookmarks() {
      this.loading = true;
      listBookmark().then(response => {
        this.bookmarks = response.rows || [];
        this.loading = false;
      }).catch(() => {
        this.bookmarks = [];
        this.loading = false;
      });
    },
    
    // 搜索书签
    searchBookmarks() {
      if (!this.searchQuery.trim()) {
        this.resetSearch();
        return;
      }
      
      this.loading = true;
      this.isSearching = true;
      
      searchBookmark(this.searchQuery).then(response => {
        this.bookmarks = response.data || [];
        this.loading = false;
      }).catch(() => {
        this.loading = false;
      });
    },
    
    // 处理搜索
    handleSearch() {
      // 捕获触发方式以方便调试
      console.log('搜索触发，当前时间:', new Date().toISOString());
      
      const query = this.searchQuery.trim();
      if (!query) return;
      
      console.log('处理搜索查询:', query);
      
      // 判断是否为URL
      if (this.isUrl(query)) {
        console.log('识别为URL，打开添加书签对话框');
        
        // 预填URL
        this.bookmarkForm.url = query.startsWith('http') ? query : `http://${query}`;
        console.log('预填URL:', this.bookmarkForm.url);
        
        // 尝试从URL中提取域名作为初始标题
        try {
          const url = new URL(this.bookmarkForm.url);
          const domain = url.hostname.replace('www.', '');
          this.bookmarkForm.title = domain.charAt(0).toUpperCase() + domain.slice(1);
          console.log('预填标题:', this.bookmarkForm.title);
          
          // 尝试获取网站favicon
          this.bookmarkForm.icon = `https://www.google.com/s2/favicons?domain=${url.hostname}&sz=64`;
          console.log('预填图标:', this.bookmarkForm.icon);
        } catch (e) {
          // 如果URL解析失败，使用输入内容作为标题
          console.log('URL解析失败，使用输入内容作为标题');
          this.bookmarkForm.title = query;
        }
        
        // 如果有分类，自动选择第一个分类
        if (this.categories.length > 0 && !this.bookmarkForm.categoryId) {
          this.bookmarkForm.categoryId = this.categories[0].id;
        }
        
        // 直接展示对话框
        this.dialogType = "add";
        this.bookmarkDialog = true;
        console.log('对话框已打开');
      } 
      // 否则直接搜索
      else {
        console.log('识别为搜索关键词，执行搜索');
        this.searchBookmarks();
      }
    },
    
    // 判断是否为URL
    isUrl(str) {
      console.log('检查输入是否为URL:', str);
      
      // 如果为空，不是URL
      if (!str) return false;
      
      // 如果已经有http/https前缀，直接认为是URL
      if (str.startsWith('http://') || str.startsWith('https://')) {
        console.log('包含http前缀，识别为URL');
        return true;
      }
      
      // 如果包含常见TLD且不含空格，认为是URL
      const commonTlds = ['.com', '.cn', '.org', '.net', '.io', '.me', '.info', '.biz', '.top', '.xyz'];
      if (!str.includes(' ') && commonTlds.some(tld => str.toLowerCase().endsWith(tld))) {
        console.log('匹配常见域名后缀，识别为URL');
        return true;
      }
      
      // 如果像域名格式（包含点号，无空格）
      if (str.includes('.') && !str.includes(' ') && str.length > 4) {
        const parts = str.split('.');
        // 至少有两部分，第二部分长度大于1（如example.com中的com）
        if (parts.length >= 2 && parts[parts.length - 1].length > 1) {
          console.log('匹配域名格式，识别为URL');
          return true;
        }
      }
      
      console.log('不符合URL格式');
      return false;
    },
    
    // 重置搜索
    resetSearch() {
      if (this.isSearching) {
        this.searchQuery = "";
        this.isSearching = false;
        this.getBookmarks();
        this.focusSearchInput();
      }
    },
    
    // 处理标签点击
    handleTabClick() {
      if (this.isSearching) {
        this.resetSearch();
      }
    },
    
    // 处理下拉菜单操作
    handleCommand(command, bookmark) {
      if (command === 'edit') {
        this.handleEdit(bookmark);
      } else if (command === 'delete') {
        this.handleDelete(bookmark);
      }
    },
    
    // 获取首字母作为图标
    getInitial(title) {
      return title ? title.charAt(0).toUpperCase() : '?';
    },
    
    // 获取随机颜色
    getRandomColor(seed) {
      if (!seed) return this.iconColors[0];
      // 使用字符串生成一个确定性的索引，这样每次相同的网址获得相同的颜色
      const index = seed.split('').reduce((acc, char) => acc + char.charCodeAt(0), 0) % this.iconColors.length;
      return this.iconColors[index];
    },
    
    // 获取辅助色（用于渐变）
    getSecondaryColor(seed) {
      if (!seed) return this.secondaryColors[0];
      const index = seed.split('').reduce((acc, char) => acc + char.charCodeAt(0), 0) % this.secondaryColors.length;
      return this.secondaryColors[index];
    },
    
    // 显示添加对话框
    showAddDialog() {
      this.dialogType = "add";
      this.resetBookmarkForm();
      
      // 如果有分类，根据当前选中的分类自动选择
      if (this.categories.length > 0) {
        // 如果当前选中的不是"全部"分类，则使用当前选中的分类
        if (this.activeCategory !== "0") {
          this.bookmarkForm.categoryId = parseInt(this.activeCategory);
        } else {
          // 否则使用第一个分类
          this.bookmarkForm.categoryId = this.categories[0].id;
        }
      }
      
      this.bookmarkDialog = true;
    },
    
    // 显示分类对话框
    showCategoryDialog() {
      this.resetCategoryForm();
      this.categoryDialog = true;
    },
    
    // 打开网站
    openSite(url) {
      window.open(url, "_blank");
    },
    
    // 处理编辑
    handleEdit(row) {
      this.dialogType = "edit";
      this.bookmarkForm = JSON.parse(JSON.stringify(row));
      this.bookmarkDialog = true;
    },
    
    // 处理删除
    handleDelete(row) {
      this.$confirm(`确认删除收藏"${row.title}"吗？`, "警告", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      }).then(() => {
        delBookmark(row.id).then(() => {
          this.$message.success("删除成功");
          this.getBookmarks();
        });
      }).catch(() => {});
    },
    
    // 提交书签表单
    submitBookmarkForm() {
      this.$refs.bookmarkForm.validate(valid => {
        if (valid) {
          // 如果URL没有协议前缀，添加http://
          if (this.bookmarkForm.url && 
              !this.bookmarkForm.url.startsWith('http://') && 
              !this.bookmarkForm.url.startsWith('https://')) {
            this.bookmarkForm.url = 'http://' + this.bookmarkForm.url;
          }
          
          // 确保有图标，如果没有则尝试获取
          if (!this.bookmarkForm.icon) {
            try {
              const url = new URL(this.bookmarkForm.url);
              this.bookmarkForm.icon = `https://www.google.com/s2/favicons?domain=${url.hostname}&sz=64`;
              console.log('自动设置图标:', this.bookmarkForm.icon);
            } catch (e) {
              console.log('无法解析URL获取图标');
            }
          }
          
          if (this.dialogType === "add") {
            addBookmark(this.bookmarkForm).then(() => {
              this.$message.success("添加成功");
              this.bookmarkDialog = false;
              this.getBookmarks();
            });
          } else {
            updateBookmark(this.bookmarkForm).then(() => {
              this.$message.success("修改成功");
              this.bookmarkDialog = false;
              this.getBookmarks();
            });
          }
        }
      });
    },
    
    // 重置书签表单
    resetBookmarkForm() {
      this.bookmarkForm = {
        id: null,
        title: "",
        url: "",
        icon: "",
        categoryId: null,
        description: ""
      };
      if (this.$refs.bookmarkForm) {
        this.$refs.bookmarkForm.resetFields();
      }
    },
    
    // 处理编辑分类
    handleEditCategory(row) {
      this.categoryForm = JSON.parse(JSON.stringify(row));
    },
    
    // 处理删除分类
    handleDeleteCategory(row) {
      // 检查是否有书签使用此分类
      const hasBookmarks = this.bookmarks.some(
        bookmark => bookmark.categoryId === row.id
      );
      
      if (hasBookmarks) {
        this.$message.warning("该分类下存在书签，请先移除或修改这些书签的分类");
        return;
      }
      
      this.$confirm(`确认删除分类"${row.name}"吗？`, "警告", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      }).then(() => {
        delCategory(row.id).then(() => {
          this.$message.success("删除成功");
          this.getCategories();
          // 如果删除的是当前选中的分类，切换到全部
          if (this.activeCategory === row.id.toString()) {
            this.activeCategory = "0";
          }
        });
      }).catch(() => {});
    },
    
    // 提交分类表单
    submitCategoryForm() {
      this.$refs.categoryForm.validate(valid => {
        if (valid) {
          if (this.categoryForm.id) {
            updateCategory(this.categoryForm).then(() => {
              this.$message.success("修改成功");
              this.resetCategoryForm();
              this.getCategories();
            });
          } else {
            addCategory(this.categoryForm).then(() => {
              this.$message.success("添加成功");
              this.resetCategoryForm();
              this.getCategories();
            });
          }
        }
      });
    },
    
    // 重置分类表单
    resetCategoryForm() {
      this.categoryForm = {
        id: null,
        name: "",
        sort: 1
      };
      if (this.$refs.categoryForm) {
        this.$refs.categoryForm.resetFields();
      }
    },
    
    // 跳转链接
    goTarget(href) {
      window.open(href, "_blank");
    },
    
    // 添加聚焦搜索框方法，方便重用
    focusSearchInput() {
      this.$nextTick(() => {
        if (this.$refs.searchInput && this.$refs.searchInput.focus) {
          this.$refs.searchInput.focus();
          console.log('搜索框已聚焦');
        } else {
          console.log('搜索框引用不可用');
          // 如果引用不可用，等待DOM更新后再次尝试
          setTimeout(() => {
            if (this.$refs.searchInput && this.$refs.searchInput.focus) {
              this.$refs.searchInput.focus();
              console.log('延迟聚焦成功');
            }
          }, 100);
        }
      });
    },
    
    // 处理对话框关闭
    onDialogClose() {
      this.resetBookmarkForm();
      // 清空搜索框
      this.searchQuery = "";
      // 重新聚焦到搜索框
      this.focusSearchInput();
    },
    
    // 处理全局按键
    handleGlobalKeyDown(e) {
      // 如果是回车键且搜索框有内容
      if (e.key === 'Enter' && this.searchQuery.trim()) {
        console.log('检测到全局回车键，触发搜索');
        this.handleSearch();
      }
    },
    
    // 处理输入
    handleInput(value) {
      // 防抖处理
      if (this.inputTimer) {
        clearTimeout(this.inputTimer);
      }
      
      this.inputTimer = setTimeout(() => {
        // 只有当输入的内容看起来是一个URL时，才自动触发
        const query = value && value.trim();
        if (query) {
          if (this.isUrl(query)) {
            console.log('自动检测到URL:', query);
            this.handleSearch();
          } else {
            // 不是URL则直接执行搜索过滤
            console.log('检测到搜索关键词，执行过滤:', query);
            this.searchBookmarks();
          }
        } else if (this.isSearching) {
          // 如果清空了搜索框，重置搜索
          this.resetSearch();
        }
      }, 300); // 300ms延迟，平衡响应速度和性能
    },
    
    // 处理URL变化
    handleUrlChange(url) {
      // 如果URL改变且格式有效，尝试获取图标
      if (url && this.isUrl(url)) {
        // 使用防抖避免频繁请求
        clearTimeout(this.iconTimer);
        this.iconTimer = setTimeout(() => {
          this.fetchWebsiteIcon();
        }, 500);
      }
    },
    
    // 获取网站图标
    fetchWebsiteIcon() {
      if (!this.bookmarkForm.url) return;
      
      try {
        // 确保URL格式正确
        const urlToFetch = this.bookmarkForm.url.startsWith('http')
          ? this.bookmarkForm.url
          : `http://${this.bookmarkForm.url}`;
        
        const url = new URL(urlToFetch);
        const domain = url.hostname;
        
        // 设置图标URL
        this.bookmarkForm.icon = `https://www.google.com/s2/favicons?domain=${domain}&sz=64`;
        console.log('已获取网站图标:', this.bookmarkForm.icon);
        
        // 如果标题为空，尝试从域名设置一个默认标题
        if (!this.bookmarkForm.title) {
          const siteName = domain.replace('www.', '');
          this.bookmarkForm.title = siteName.charAt(0).toUpperCase() + siteName.slice(1);
        }
      } catch (e) {
        console.error('获取图标失败:', e);
      }
    }
  }
};
</script>

<style lang="scss" scoped>
// 全局样式变量
$primary-color: #0066ff;
$secondary-color: #5d8dec;
$text-primary: #2c3e50;
$text-secondary: #5e6c84;
$text-muted: #8492a6;
$bg-color: #f7f9fc;
$bg-card: #ffffff;
$border-radius: 12px;
$shadow-light: 0 4px 12px rgba(0, 0, 0, 0.05);
$shadow-medium: 0 6px 16px rgba(0, 0, 0, 0.08);
$shadow-hover: 0 8px 24px rgba(0, 0, 0, 0.12);
$transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);

// 应用容器
.app-container {
  position: relative;
  min-height: calc(100vh - 50px);
  padding: 0;
  margin: 0;
  overflow: hidden;
  background-color: $bg-color;
  color: $text-primary;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

// 背景图层
.background-layer {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  background: linear-gradient(135deg, #f5f7fa 0%, #e8ecf5 100%);
  opacity: 0.8;
}

// 内容容器
.content-container {
  position: relative;
  z-index: 1;
  max-width: 1280px;
  margin: 0 auto;
  padding: 30px;
  height: 100%;
}

// 头部样式
.app-header {
  margin-bottom: 40px;
  
  .logo-container {
    display: flex;
    align-items: center;
    margin-bottom: 30px;
    
    i {
      font-size: 28px;
      color: $primary-color;
      margin-right: 12px;
    }
    
    h1 {
      font-size: 26px;
      font-weight: 600;
      color: $text-primary;
      margin: 0;
    }
  }
  
  .header-content {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
  }
  
  .search-container {
    flex: 1;
    max-width: 600px;
    
    ::v-deep .el-input__inner {
      height: 48px;
      border-radius: 24px;
      border: 1px solid rgba(0, 0, 0, 0.06);
      font-size: 15px;
      padding-left: 48px;
      padding-right: 20px;
      box-shadow: $shadow-light;
      background-color: rgba(255, 255, 255, 0.9);
      backdrop-filter: blur(10px);
      transition: $transition;
      
      &:hover, &:focus {
        border-color: $primary-color;
        box-shadow: 0 6px 16px rgba(0, 102, 255, 0.15);
      }
    }
    
    ::v-deep .el-input__prefix {
      left: 16px;
      color: $primary-color;
      font-size: 18px;
    }
    
    ::v-deep .el-input__suffix {
      right: 12px;
    }
  }
  
  .action-buttons {
    display: flex;
    gap: 12px;
    
    .el-button {
      height: 48px;
      padding: 0 24px;
      border-radius: 24px;
      font-size: 15px;
      font-weight: 500;
      letter-spacing: 0.3px;
      transition: $transition;
      border: none;
      
      i {
        margin-right: 8px;
        font-size: 16px;
      }
      
      &:hover {
        transform: translateY(-2px);
        box-shadow: $shadow-hover;
      }
      
      &.el-button--primary {
        background: linear-gradient(135deg, $primary-color 0%, $secondary-color 100%);
      }
      
      &.el-button--info {
        background-color: rgba(0, 0, 0, 0.65);
      }
    }
  }
}

// 主要内容区
.main-content {
  background-color: rgba(255, 255, 255, 0.6);
  border-radius: $border-radius;
  padding: 24px;
  box-shadow: $shadow-light;
  backdrop-filter: blur(10px);
}

// 分类标签
.category-tabs {
  margin-bottom: 32px;
  
  ::v-deep .el-tabs__header {
    margin-bottom: 24px;
    border-bottom: none;
  }
  
  ::v-deep .el-tabs__nav-wrap {
    &::after {
      display: none;
    }
  }
  
  ::v-deep .el-tabs__nav {
    border: none;
  }
  
  ::v-deep .el-tabs__item {
    height: 40px;
    line-height: 40px;
    font-size: 15px;
    padding: 0 24px;
    color: $text-secondary;
    transition: $transition;
    border: none;
    border-radius: 20px;
    margin-right: 8px;
    
    &:hover {
      color: $primary-color;
      background-color: rgba(0, 102, 255, 0.05);
    }
    
    &.is-active {
      color: white;
      font-weight: 500;
      background: linear-gradient(135deg, $primary-color 0%, $secondary-color 100%);
      border: none;
    }
  }
  
  ::v-deep .el-tabs--card > .el-tabs__header .el-tabs__nav {
    border: none;
  }
  
  ::v-deep .el-tabs--card > .el-tabs__header .el-tabs__item {
    border: none;
  }
}

// 书签容器
.bookmark-container {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 24px;
  margin-bottom: 30px;
}

// 书签卡片
.bookmark-card {
  position: relative;
  display: flex;
  flex-direction: column;
  height: 180px;
  background-color: $bg-card;
  border-radius: $border-radius;
  padding: 24px;
  cursor: pointer;
  transition: $transition;
  border: 1px solid rgba(0, 0, 0, 0.04);
  overflow: hidden;
  box-shadow: $shadow-light;
  
  &:hover {
    transform: translateY(-4px);
    box-shadow: $shadow-hover;
    
    .bookmark-actions {
      opacity: 1;
    }
  }
  
  // 卡片头部
  .bookmark-header {
    display: flex;
    align-items: center;
    margin-bottom: 16px;
  }
  
  // 书签图标
  .bookmark-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    margin-right: 14px;
    border-radius: 12px;
    overflow: hidden;
    flex-shrink: 0;
    box-shadow: $shadow-light;
    border: 1px solid rgba(0, 0, 0, 0.04);
    
    img {
      width: 100%;
      height: 100%;
      object-fit: contain;
    }
    
    .default-icon {
      width: 100%;
      height: 100%;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 20px;
      font-weight: bold;
      color: white;
    }
  }
  
  // 标题
  .bookmark-title {
    font-size: 17px;
    font-weight: 600;
    margin: 0;
    line-height: 1.5;
    color: $text-primary;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    flex-grow: 1;
  }
  
  // 链接
  .bookmark-url {
    font-size: 14px;
    color: $text-muted;
    margin-bottom: 14px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  
  // 描述
  .bookmark-desc {
    font-size: 15px;
    color: $text-secondary;
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    line-height: 1.6;
    flex-grow: 1;
  }
  
  // 操作按钮
  .bookmark-actions {
    position: absolute;
    right: 16px;
    top: 16px;
    opacity: 0;
    transition: opacity 0.3s ease;
    
    .el-dropdown-link {
      font-size: 18px;
      color: $text-muted;
      cursor: pointer;
      padding: 6px;
      border-radius: 50%;
      transition: $transition;
      background-color: rgba(255, 255, 255, 0.9);
      box-shadow: $shadow-light;
      display: flex;
      align-items: center;
      justify-content: center;
      
      &:hover {
        color: $primary-color;
        background-color: white;
        box-shadow: $shadow-medium;
      }
    }
  }
}

// 空状态
.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 80px 0;
  background: rgba(255, 255, 255, 0.8);
  border-radius: $border-radius;
  box-shadow: $shadow-light;
  
  i {
    font-size: 70px;
    margin-bottom: 24px;
    color: $text-muted;
    opacity: 0.6;
  }
  
  .empty-text {
    font-size: 16px;
    margin-bottom: 32px;
    color: $text-secondary;
  }
  
  .el-button {
    height: 44px;
    padding: 0 28px;
    border-radius: 22px;
    font-size: 15px;
    font-weight: 500;
    background: linear-gradient(135deg, $primary-color 0%, $secondary-color 100%);
    border: none;
    box-shadow: $shadow-light;
    transition: $transition;
    
    &:hover {
      transform: translateY(-2px);
      box-shadow: $shadow-hover;
    }
    
    i {
      font-size: 16px;
      margin-right: 8px;
      margin-bottom: 0;
      color: white;
      opacity: 1;
    }
  }
}

// 加载中
.loading-container {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  height: 300px;
  background: rgba(255, 255, 255, 0.8);
  border-radius: $border-radius;
  box-shadow: $shadow-light;
  
  p {
    margin-top: 20px;
    color: $text-secondary;
    font-size: 16px;
  }
  
  .loader {
    width: 48px;
    height: 48px;
    border: 4px solid rgba(0, 102, 255, 0.2);
    border-left-color: $primary-color;
    border-radius: 50%;
    animation: spin 1s linear infinite;
  }
  
  @keyframes spin {
    to {
      transform: rotate(360deg);
    }
  }
}

// 对话框样式
::v-deep .custom-dialog {
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.15);
  
  .el-dialog__header {
    background: $primary-color;
    padding: 20px 24px;
    
    .el-dialog__title {
      color: white;
      font-weight: 600;
      font-size: 18px;
    }
    
    .el-dialog__headerbtn {
      top: 20px;
      right: 20px;
      
      .el-dialog__close {
        color: rgba(255, 255, 255, 0.8);
        
        &:hover {
          color: white;
        }
      }
    }
  }
  
  .el-dialog__body {
    padding: 30px 24px;
  }
  
  .el-dialog__footer {
    padding: 16px 24px;
    border-top: 1px solid rgba(0, 0, 0, 0.05);
  }
  
  .el-form-item__label {
    font-weight: 500;
    color: $text-primary;
  }
  
  .el-input__inner, .el-textarea__inner {
    border-radius: 8px;
    border-color: rgba(0, 0, 0, 0.1);
    transition: $transition;
    
    &:focus {
      border-color: $primary-color;
      box-shadow: 0 0 0 2px rgba(0, 102, 255, 0.1);
    }
  }
  
  .el-select .el-input__inner {
    &:focus {
      border-color: $primary-color;
    }
  }
  
  .el-button {
    border-radius: 8px;
    padding: 10px 20px;
    font-weight: 500;
    transition: $transition;
    
    &.el-button--primary {
      background-color: $primary-color;
      border-color: $primary-color;
      
      &:hover {
        background-color: darken($primary-color, 5%);
        border-color: darken($primary-color, 5%);
        box-shadow: 0 4px 12px rgba(0, 102, 255, 0.2);
      }
    }
  }
}

// 图标预览样式
.icon-input-container {
  display: flex;
  align-items: center;
  
  .el-input {
    flex: 1;
  }
  
  .icon-preview {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    margin-left: 12px;
    border-radius: 8px;
    overflow: hidden;
    border: 1px solid rgba(0, 0, 0, 0.1);
    flex-shrink: 0;
    box-shadow: $shadow-light;
    
    img {
      width: 100%;
      height: 100%;
      object-fit: contain;
    }
    
    .default-icon {
      width: 100%;
      height: 100%;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 16px;
      font-weight: bold;
      color: white;
    }
  }
}

// URL输入容器样式
.url-input-container {
  display: flex;
  align-items: center;
  
  .el-input {
    flex: 1;
  }
  
  .refresh-icon {
    margin-left: 12px;
    background-color: $primary-color;
    box-shadow: $shadow-light;
    transition: $transition;
    
    &:hover {
      background-color: darken($primary-color, 5%);
      box-shadow: 0 4px 12px rgba(0, 102, 255, 0.2);
      transform: rotate(30deg);
    }
  }
}

// 响应式设计
@media screen and (max-width: 768px) {
  .content-container {
    padding: 16px;
  }
  
  .app-header {
    margin-bottom: 24px;
    
    .logo-container {
      margin-bottom: 20px;
    }
    
    .header-content {
      flex-direction: column;
      gap: 16px;
    }
    
    .search-container {
      width: 100%;
      max-width: 100%;
    }
    
    .action-buttons {
      width: 100%;
      justify-content: space-between;
      
      .el-button {
        flex: 1;
      }
    }
  }
  
  .main-content {
    padding: 16px;
  }
  
  .bookmark-container {
    grid-template-columns: 1fr;
    gap: 16px;
  }
}
</style>




